<template>
  <div class="flex flex-row w-full mb-3">
    <div>
      <el-avatar
        size="large"
        :src="props.commentData?.avatar ? props.commentData?.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
      />
    </div>
    <div class="mx-3">
      <div class=" text-lg font-bold">
        {{ props.commentData?.userName }}
      </div>
      <div>
        {{ props.commentData?.msg }}
      </div>
      <el-text
        class="mx-1"
        type="info"
      >{{ props.commentData?.createDateTime }}</el-text>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  commentData: {
    type: Object,
    required: true,
  },
})
console.log(props.commentData)
</script>